<template>
  <transition>
  <div class="app-enquiry-confirm">
    <section class="app-main">

      <div class="product-content">
        <div class="product-img">
          <img src="static/img/img-car.jpg"/></div>
        <ul class="product-details">
          <li class="item">
            <span class="item-addon">车型：</span>雅阁 2018款 230TURBO 舒享版230TURBO 舒享版
          </li>
          <li class="item">
            <span class="item-addon">报价1：</span>侧挡玻璃左边第二片-<span class="text-red">￥498</span>
          </li>
          <li class="item">
            <span class="item-addon">报价2：</span>侧挡玻璃左边第二片-<span class="text-red">￥498</span>
          </li>
        </ul>
      </div>

      <div class="module-service">
        <div class="module-wuliu clearfix">
          <span class="item-title">配送服务</span>
          <dl class="way-list js-way-list pull-right">
            <dd class="item active"><span>上门自取</span></dd>
            <dd class="item has-address"><span>快递服务</span></dd>
            <dd class="item has-address"><span>送货上门</span></dd>
          </dl>
        </div>
        <div class="module-address">
          <a href="app-add-address.html" class="clearfix">
            <span class="address-title">收货地址</span>
            <div class="address-content pull-right">
              <!--没有录入地址时显示-->
              <!--<div class="address-none">请选择收货地址</div>-->
              <!--没有录入地址时显示-->
              <div class="address-header">庄港发&nbsp;&nbsp;13565434556</div>
              <div class="address-footer">广东省广州市白云区</div>
            </div>
          </a>
        </div>
      </div>
      <ul class="module-block">
        <li class="word-content">
          <div>商品总额：<span class="text-red pull-right">￥908</span></div>
          <div class="price-yunfei">运费：<span class="text-red pull-right">￥10</span></div>
        </li>
        <li class="word-content">实付总额：<span class="text-red pull-right">￥918</span></li>
      </ul>

    </section>
  </div>
    </transition>
</template>

<script>
  import { Header,Cell } from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  components:{
    Header,
    Cell,
  },
  data () {
    return {
    }
  },
  mounted(){}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-enquiry-confirm .product-content{
    background: #fff;
    margin:0 0 12px;
    padding:12px;
    font-size:14px;
  }
  .app-enquiry-confirm .product-content .product-img{
    display: table-cell;
    vertical-align: top;
    width:24%;
    padding-right:12px;
  }
  .app-enquiry-confirm .product-content .product-details{
    display: table-cell;
    vertical-align: top;
    width:76%;
  }
  .app-enquiry-confirm .product-content .item{
    margin:0 0 4px;
  }
  .app-enquiry-confirm .product-content .item-img{
    margin:0 0 10px;
  }

  .module-service{
    margin:0 0 12px;
  }

  .module-wuliu{
    background: #fff;
    padding:px2rem(28) px2rem(24);
    margin:0;
    font-size:px2rem(28);
  }
  .module-wuliu .item-title{
    display: inline-block;
    vertical-align: middle;
    padding:px2rem(6) 0;
    font-weight: normal;
  }
  .module-wuliu .way-list{
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    font-size: 0;
  }

  .module-wuliu .way-list .item{
    display: inline-block;
    vertical-align: middle;
    padding:0 px2rem(12);
  }
  .module-wuliu .way-list span{
    display: block;
    background: #ccc;
    width:px2rem(140);
    padding:px2rem(6) 0;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    font-size:px2rem(28);
  }
  .module-wuliu .item-content{
    font-weight: normal;
  }
  .module-wuliu .input-select{
    position: relative;
    top:px2rem(3);
    margin-right:px2rem(8);
  }
</style>
